<template>
	<div>
		<a-card :borderd="false" class="mb-2">
			<a-row :gutter="8">
				<a-col :span="2">
					<a-select v-model:value="config.listQuery.userId" style="width:100%" placeholder="请选择用户"
							  allow-clear>
						<a-select-option v-for="item in config.userList" :key="item.id" :value="item.id">
							{{ item.name }}
						</a-select-option>
					</a-select>
				</a-col>
				<a-col :span="2">
					<a-select v-model:value="config.listQuery.licenseId" style="width:100%" placeholder="请选择License"
							  allow-clear>
						<a-select-option v-for="item in config.licenseList" :key="item.id" :value="item.id">
							{{ item.name }}
						</a-select-option>
					</a-select>
				</a-col>

				<a-col :span="12">
					<a-space>
						<a-button type="primary" @click="tableRef.refresh()">搜索
						</a-button>
					</a-space>
				</a-col>
			</a-row>
		</a-card>


		<a-card>
			<h-table :paged="true" ref="tableRef" :data="getList" :columns="columns">
			</h-table>

		</a-card>
	</div>
</template>

<script setup>
import reportApi from '@/api/report/reportApi.js'
import userApi from '@/api/sys/userApi'
import licenseApi from '@/api/license/licenseApi.js'

const {proxy} = getCurrentInstance();
const tableRef = ref();
const config = ref({
	tableKey: 0,
	list: null,
	total: null,
	listLoading: false,
	listQuery: {
		userId: undefined,
		licenseId: undefined
	},
	userList: [],
	licenseList: [],
	dialogVisible: false,
	selectRow: {}
})


const columns = ref([
	{
		title: 'id',
		key: 'id',
		dataIndex: 'id',
		ellipsis: true,
	},
	{
		title: '用户名',
		key: 'userName',
		dataIndex: 'userName',
		ellipsis: true,
	},
	{
		title: 'licenseName',
		key: 'licenseName',
		dataIndex: 'licenseName',
		ellipsis: true,
	},
	{
		title: '上行流量',
		key: 'upFlowDesc',
		dataIndex: 'upFlowDesc',
		ellipsis: true,
	},
	{
		title: '下行流量',
		key: 'downFlowDesc',
		dataIndex: 'downFlowDesc',
		ellipsis: true,
	},
	{
		title: '总流量',
		key: 'totalFlowDesc',
		dataIndex: 'totalFlowDesc',
		ellipsis: true,
	},
	{
		title: '时间',
		key: 'date',
		dataIndex: 'date',
		ellipsis: true,
	},
])
if (proxy.$route.query.userId) {
	config.value.listQuery.userId = proxy.$route.query.userId
}
if (proxy.$route.query.licenseId) {
	config.value.listQuery.licenseId = proxy.$route.query.licenseId
}
onMounted(() => {
	getUserList()
	getLicenseList()
})

const getList = async () => {
	let response = await reportApi.fetchLicenseFlowMonthReportList(config.value.listQuery);
	return response;
}
const getUserList = async () => {
	let response = await userApi.userSelector();
	config.value.userList = response.records
}
const getLicenseList = async () => {
	let response = await licenseApi.licenseList();
	config.value.licenseList = response
}

</script>

<style>

</style>
